<template>
	<div class="class-dialog">
		<el-dialog
			title="系列课"
			:visible.sync="showClassFlag"
			width="30%"
			center
			:before-close="closeDialog"
		>
			<p class="item">
				<span class="left_item">项目:</span>
				<span>{{ showForm.projectName }}</span>
			</p>
			<p class="item">
				<span class="left_item">系列课名称:</span>
				<span>{{ showForm.name }}</span>
			</p>
			<p class="item">
				<span class="left_item">教学阶段:</span>
				<span>{{ showForm.teachRange|veDict('teachRange') }}</span>
			</p>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "classDialog",
		props: {
			showClassFlag: {
				type: Boolean,
				default: () => false
			},
			showForm: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			closeDialog() {
				this.$emit("close-show-dialog");
			}
		}
	};
</script>

<style lang="less" scoped>
	.item {
		height: 33px;
		margin-bottom: 18px;
        display: flex;
        align-items: flex-start;

		.left_item {
			display: inline-block;
			margin-left: 50px;
			padding-right: 10px;
            flex-shrink: 0;
		}
	}
</style>
